iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

[ 重構倒數30天,你的網站不Vue白不Vue ] 系列 第 21

[重構倒數第10天] - 行動裝置上面的 Touch 跟 Click

  • 分享至 

  • xImage
  •  

前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

我們很常的會使用 v-on:click 的方式再我們網頁上面去觸發一些想做的事情,但是我們的網頁也會需要再手機上面去使用,click 事件雖然在手機上面也會有反應,但是畢竟是針對滑鼠點擊所設計的事件,在現代的行動裝置上面來說,click 事件功能細節稍稍不足,所以再行動裝置上面現在大多都改用 touch 事件來處理行動裝置上面的觸摸、滑動等。

這邊列出最常見的幾個 Touch Event

  1. touchstart:當手指觸摸到螢幕的時候,但手指還沒有離開螢幕。
  2. touchmove:手指在螢幕上面滑動。
  3. touchend: 當手指離開螢幕的時候。
  4. touchcancel:當你再觸摸或是滑動的時候被中斷的時候觸發。

關於touchcancel的觸發時機

  • 發生了某種取消touch事件情況,例如再滑動的過程中彈出警報視窗就會出發。
  • 或是手指離開視窗並移動到瀏覽器上方的 UI 區域或其他外部內容中。
  • 用戶在螢幕上放置的觸摸點超出了可使用的範圍,在這種情況下,TouchList 中最早的 Touch 將被取消。

TouchEvent MDN : https://developer.mozilla.org/zh-TW/docs/Web/API/TouchEvent

事件的執行先後順序

當我今天手指點擊到手機上面的時候,事件的觸發下面這樣

touchstart -> touchmove -> touchend -> click

我們在網頁上面同時要監聽 touch 事件以及 click 事件

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 console.log("touchstart event!")
})
  
Button.addEventListener("click", e => {
 console.log("click event!")
})

在桌機上面touchstart 是不會有反應的

vue mike

但是在手機上面就會照我們剛剛的順序,先執行了touchstart 然後再執行 click 事件

mike vue

codeprn 範例 : https://codepen.io/MikeCheng1208/pen/VwWQVLE

該怎麼解決呢?

為了讓行動裝置可以不要觸發 click 事件,我們可以加上 preventDefault()來阻止 click 事件的觸發。

const Button = document.getElementById("targetButton");

Button.addEventListener("touchstart", e => {
  e.preventDefault()
  console.log("touchstart event!")
})
  
Button.addEventListener("click", e => {
  e.preventDefault()
  console.log("click event!")
})

vue mike

codepen 範例 : https://codepen.io/MikeCheng1208/pen/dyRdQOQ

那再Vue上面該如何實做呢 ?

其實只要透過 Vue 的 Event Modifiers ( 事件修飾符 ) 就可以處理完成,

<button @click.prevent="clickFn" @touchstart.prevent="touchFn">touch click.</button>

codepen 範例 : https://codepen.io/MikeCheng1208/pen/zYzRMwR

另外一種做法,動態的去綁定事件 !

使用 Event Modifiers 會讓你的 template 上面寫了兩個事件,某種程度看起來 html 上面有點掛太多東西了,而且還要寫兩個 function 裡面是執行一樣的內容,所以今天如果可以對於 v-on 事件去做動態的綁定,例如今天是用手機看的我就只綁定 @touchstart,是桌機就是 @click,那我就不用寫兩個 function,html上面也會比較單純,那我們來看一下怎麼做。

<script>
import { ref } from Vue;
export default {
  setup(){
    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())
    const events = ref(isMobile ? 'touchstart' : 'click');
    const cluckAndTouchFn = () => {
      console.log('cluck And touch Event')
    }
    return {
      events,
      cluckAndTouchFn
    }
  }
};
</script>
<template>
    <button v-on:[events]="cluckAndTouchFn">touch click.</button>
</template>
  1. 我首先先去判斷它是不是手機
  2. 然後去定義一個 refevent name,如果是手機就 return 'touchstart'不然就是 click
  3. 然後透過 v-on:[events]的方式去動態的綁定事件。

這樣一來我們就可以只針對裝置去判斷要綁定什麼事件上去,是非常好用的一個方法。

codepen 範例 : https://codepen.io/MikeCheng1208/pen/QWgQJQd

今天就先告一個段落

再手機上面還是使用 touch 事件會比較順暢跟靈敏,不過 click 事件也是堪用啦,但是如果需要更多的操作空間,那你真的可以考慮使用 touch 事件,不要嫌麻煩,那我們明天見啦~

QRcode

那如果對於Vue3不夠熟的話呢?

Ps. 購買的時候請登入或註冊該平台的會員,然後再使用下面連結進入網站點擊「立即購課」,這樣才可以讓我獲得更多的課程分潤,還可以幫助我完成更多豐富的內容給各位。

我有開設了一堂專門針對Vue3從零開始教學的課程,如果你覺得不錯的話,可以購買我課程來學習
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果對於JS基礎不熟的朋友,我也有開設JS的入門課程,可以參考這個課程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

訂閱Mike的頻道享受精彩的教學與分享

Mike 的 Youtube 頻道
Mike的medium
MIke 的官方 line 帳號,好友搜尋 @mike_cheng


上一篇
[重構倒數第11天] - 如何在 Vue 中寫出高效能的網頁渲染方式 ?
下一篇
[重構倒數第09天] - Vue-Cli + PurgeCSS 刪除你用不到的CSS
系列文
[ 重構倒數30天,你的網站不Vue白不Vue ] 32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言